$(function () {
  // 监控区域模块制作
  (function () {
    $(".monitor .tabs").on("click", "a", function () {
      $(this)
        .addClass("active")
        .siblings("a")
        .removeClass("active");

      // console.log($(this).index());
      //   选取对应索引号的content
      $(".monitor .content")
        .eq($(this).index())
        .show()
        .siblings(".content")
        .hide();
    });
    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function () {
      // console.log($(this));
      var rows = $(this)
        .children()
        .clone();
      $(this).append(rows);
    });
  })();

  // 点位分布统计模块
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie"));
    // 2. 指定配置项和数据
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },

      series: [{
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        title: '',
        name: "点位占比",
        type: "pie",
        radius: ['10%', '70%'],
        center: ["50%", "50%"],
        roseType: "radius",
        label: {
          fontSize: 10,
          rotate: 25
        },
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8
        },
        data: [{
            value: 10,
            name: "云南"
          },
          {
            value: 5,
            name: "北京"
          },
          {
            value: 15,
            name: "山东"
          },
          {
            value: 25,
            name: "河北"
          },
          {
            value: 20,
            name: "江苏"
          },
          {
            value: 35,
            name: "浙江"
          },
          {
            value: 30,
            name: "四川"
          },
          {
            value: 40,
            name: "湖北"
          }
        ]
      }]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })();

  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 中间省略的数据  准备三项
    var item = {
      name: '',
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: '#254065'
      },
      // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 工具提示隐藏
      tooltip: {
        extraCssText: 'opacity:0'
      },
    }
    // 2. 指定配置和数据
    var option = {
      // 修改线性渐变色方式 1
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#00fffb'
          }, // 0 起始颜色
          {
            offset: 1,
            color: '#0061ce'
          } // 1 结束颜色
        ]
      ),
      // // 修改线性渐变色方式 2
      // color: {
      //   type: 'linear',
      //   x: 0,
      //   y: 0,
      //   x2: 0,
      //   y2: 1,
      //   colorStops: [{
      //     offset: 0,
      //     color: 'red' // 0% 处的颜色
      //   }, {
      //     offset: 1,
      //     color: 'blue' // 100% 处的颜色
      //   }],
      //   globalCoord: false // 缺省为 false
      // },
      //提示框组件
      tooltip: {
        trigger: 'item',
        // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
        // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        // }
      },
      // 直角坐标系内绘图网格（区域）
      grid: {
        top: '3%',
        right: '3%',
        bottom: '3%',
        left: '0%',
        //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      // 控制x轴
      xAxis: [{

        // 使用类目，必须有data属性
        type: 'category',
        // 使用 data 中的数据设为刻度文字
        data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
        // 刻度设置       
        axisTick: {
          // true意思：图形和刻度居中中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          // 不显示刻度
          show: false
        },
        // x坐标轴文字标签样式设置
        axisLabel: {
          fontSize: 10,
          color: '#4c9bfd'
        },
        // x坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)',
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          }
        }
      }],
      // 控制y轴
      // 控制y轴
      yAxis: [{
        // category使用类目，必须有data属性
        type: 'value',
        // 使用 data 中的数据设为刻度文字
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        // 刻度设置
        axisTick: {
          // 不显示刻度
          show: false
        },
        // y坐标轴文字标签样式设置
        axisLabel: {
          color: '#4c9bfd'
        },
        // y坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)',
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          }
        },
        // y轴 分割线的样式 
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        }
      }],
      series: [{
        // 图表数据名称
        name: '用户统计',
        // 图表类型
        type: 'bar',
        // 柱子宽度
        barWidth: '60%',
        // 数据
        data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
        //提示框组件
      }]
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // 销售统计模块
  (function () {
    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    }
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line"));
    // 2. 指定配置和数据
    var option = {
      tooltip: {
        trigger: "axis"
      },
      // legend: {
      //   right: '10%',
      //   // type: 'category',
      //   // data: ["邮件营销", "联盟广告"],

      // },
      legend: {
        textStyle: {
          color: '#4c9bfd' // 图例文字颜色
        },
        right: '10%' // 距离右边10%
      },
      // 设置网格样式
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        show: true, // 显示边框
        borderColor: '#012f4a', // 边框颜色
        containLabel: true // 包含刻度文字在内
      },

      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          fontSize: 10,
          color: '#4c9bfd' // 文本颜色
        },
        axisLine: {
          show: false // 去除轴线
        },
        boundaryGap: false // 去除轴内间距
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false // 去除刻度
        },
        axisLabel: {
          color: '#4c9bfd' // 文字颜色
        },
        splitLine: {
          lineStyle: {
            color: '#012f4a' // 分割线颜色
          }
        }
      },
      color: ['#00f2f1', '#ed3f35'],
      series: [{
        name: '预期销售额',
        data: data.year[0],
        // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: 'line',
        // 折线修饰为圆滑
        smooth: true,
        itemStyle: {
          color: '#00f2f1'
        }
      }, {
        name: '实际销售额',
        data: data.year[1],
        // data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#ed3f35'
        }
      }]
    };
    // 切换
    var index = 0
    $('.sales').on('click', '.caption a', function () {
      // 样式
      index = $(this).index() - 1
      $(this).addClass('active').siblings().removeClass('active')
      // currData 当前对应的数据  
      // this.dataset.type 标签上的data-type属性值，对应data中的属性                  
      var currData = data[this.dataset.ty]
      // 修改图表1的数据

      option.series[0].data = currData[0]
      // 修改图表2的数据                  
      option.series[1].data = currData[1]
      // 重新设置数据  让图标重新渲染                  
      myChart.setOption(option)
    })

    var as = $(".sales .caption a");
    index = 0;
    var timer = setInterval(function () {
      index++;
      if (index >= 4) index = 0;
      as.eq(index).click();
    }, 1000);
    // 鼠标经过sales，关闭定时器，离开开启定时器
    $(".sales").hover(
      function () {
        clearInterval(timer);
      },
      function () {
        clearInterval(timer);
        timer = setInterval(function () {
          index++;
          if (index >= 4) index = 0;
          as.eq(index).click();
        }, 1000);
      }
    );

    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // 雷达
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置
    var dataBJ = [
      [55, 9, 56, 0.46, 18, 6, 1]
    ];
    var lineStyle = {
      normal: {
        width: 1,
        opacity: 0.5
      }
    };
    var option = {
      backgroundColor: "#161627",
      radar: {
        // 雷达图的指示器 内部填充数据
        indicator: [{
            name: '机场',
            max: 100
          },
          {
            name: '商场',
            max: 100
          },
          {
            name: '火车站',
            max: 100
          },
          {
            name: '汽车站',
            max: 100
          },
          {
            name: '地铁',
            max: 100
          }
        ],
        center: ['50%', '50%'],
        // 外半径占据容器大小
        radius: '50%',
        // 指示器轴的分割段数
        splitNumber: 4,
        shape: "circle",
        name: {
          textStyle: {
            color: '#4c9bfd'
          }
        },
        splitLine: {
          lineStyle: {
            color: [
              "rgba(238, 197, 102, 0.1)",
              "rgba(238, 197, 102, 0.2)",
              "rgba(238, 197, 102, 0.4)",
              "rgba(238, 197, 102, 0.6)",
              "rgba(238, 197, 102, 0.8)",
              "rgba(238, 197, 102, 1)"
            ].reverse()
          }
        },
        // lineStyle: {
        //   color: 'rgba(255, 255, 255, 0.5)',
        //   // width: 2,
        //   // type: 'dashed'
        // },
        splitArea: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            normal: {
              color: '#fff',
              // width: 1
            }
            // width: 1,
            // type: 'solid'
          }
        },
      },
      tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ['40%', '1%'],
      },
      series: [{
        name: "北京",
        type: "radar",
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: "#fff",
            width: 1,
            opacity: 0.5
          }
        },
        data: [
          [90, 19, 56, 11, 34]
        ],
        // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
        symbol: 'circle',
        // 拐点的大小  
        symbolSize: 4,
        // 小圆点（拐点）设置为白色
        itemStyle: {
          color: '#fff'
        },
        // 在圆点上显示相关数据
        label: {
          show: true,
          color: '#fff',
          fontSize: 10
        },
        areaStyle: {
          color: 'rgba(238, 197, 102, 0.6)',
          // opacity: 0.1
        }
      }]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // 销售模块 饼形图 半圆形 设置方式
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
      series: [{
        name: "销售进度",
        type: "pie",
        radius: ["130%", "150%"],
        center: ['48%', '80%'],
        //是否启用防止标签重叠策略
        // avoidLabelOverlap: false,
        labelLine: {
          normal: {
            show: false
          }
        },
        startAngle: 180,
        // 鼠标经过不变大
        hoverOffset: 0,
        data: [{
            value: 100,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [{
                    offset: 0,
                    color: "#00c9e0"
                  }, // 0 起始颜色
                  {
                    offset: 1,
                    color: "#005fc1"
                  } // 1 结束颜色
                ]
              )
            }
          },
          {
            value: 100,
            itemStyle: {
              color: '#12274d'
            }
          },
          {
            value: 200,
            itemStyle: {
              color: 'transparent'
            }
          } // 透明隐藏第三块区域// 颜色#12274d
        ]
      }]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();






  var dd = {
    year: ['20,301,987', '99834'],
    jidu: ['301,987', '9834'],
    mouth: ['1,987', '3834'],
    day: ['987', '834']
  }



  $('.filter').on('click', 'a', function () {
    i = $(this).index()
    $(this).parents('.filter').siblings('.data').children('.item:first').find('h4').html(dd[this.dataset.type][0])
    $(this).parents('.filter').siblings('.data').children('.item:last').find('h4').html(dd[this.dataset.type][1])
    $(this).addClass('active').siblings().removeClass('active')
    // clearInterval(timer2)
  })
  var i = 0
  var ass = $('.filter a')
  var timer2 = setInterval(function () {
    i++;
    if (i >= 4) i = 0
    ass.eq(i).click()
  }, 1000)

  $('.order').hover(function () {
    clearInterval(timer2)
  }, function () {
    clearInterval(timer2)
    timer2 = setInterval(function () {
      i++;
      if (i >= 4) i = 0
      ass.eq(i).click()
    }, 1000)
  })

  // 热销排行榜 

  var hotData = [{
      city: '北京', // 城市
      sales: '25, 179', // 销售额
      flag: true, //  上升还是下降
      brands: [ //  品牌种类数据
        {
          name: '可爱多',
          num: '9,086',
          flag: true
        },
        {
          name: '娃哈哈',
          num: '8,341',
          flag: true
        },
        {
          name: '喜之郎',
          num: '7,407',
          flag: false
        },
        {
          name: '八喜',
          num: '6,080',
          flag: false
        },
        {
          name: '小洋人',
          num: '6,724',
          flag: false
        },
        {
          name: '好多鱼',
          num: '2,170',
          flag: true
        },
      ]
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [{
          name: '可爱多',
          num: '3,457',
          flag: false
        },
        {
          name: '娃哈哈',
          num: '2,124',
          flag: true
        },
        {
          name: '喜之郎',
          num: '8,907',
          flag: false
        },
        {
          name: '八喜',
          num: '6,080',
          flag: true
        },
        {
          name: '小洋人',
          num: '1,724',
          flag: false
        },
        {
          name: '好多鱼',
          num: '1,170',
          flag: false
        },
      ]
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [{
          name: '可爱多',
          num: '2,345',
          flag: true
        },
        {
          name: '娃哈哈',
          num: '7,109',
          flag: true
        },
        {
          name: '喜之郎',
          num: '3,701',
          flag: false
        },
        {
          name: '八喜',
          num: '6,080',
          flag: false
        },
        {
          name: '小洋人',
          num: '2,724',
          flag: false
        },
        {
          name: '好多鱼',
          num: '2,998',
          flag: true
        },
      ]
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [{
          name: '可爱多',
          num: '2,156',
          flag: false
        },
        {
          name: '娃哈哈',
          num: '2,456',
          flag: true
        },
        {
          name: '喜之郎',
          num: '9,737',
          flag: true
        },
        {
          name: '八喜',
          num: '2,080',
          flag: true
        },
        {
          name: '小洋人',
          num: '8,724',
          flag: true
        },
        {
          name: '好多鱼',
          num: '1,770',
          flag: false
        },
      ]
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [{
          name: '可爱多',
          num: '9,567',
          flag: true
        },
        {
          name: '娃哈哈',
          num: '2,345',
          flag: false
        },
        {
          name: '喜之郎',
          num: '9,037',
          flag: false
        },
        {
          name: '八喜',
          num: '1,080',
          flag: true
        },
        {
          name: '小洋人',
          num: '4,724',
          flag: false
        },
        {
          name: '好多鱼',
          num: '9,999',
          flag: true
        },
      ]
    }
  ]
  var supHTML = "";
  $.each(hotData, function (index, item) {
    // console.log(item);
    supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
    ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
  });
  $(".sup").html(supHTML);

  // 所有的LI

  $('.province .sup').on('mouseenter', 'li', function () {
    index = $(this).index()
    render($(this))
  })

  function render(that) {
    that.addClass('active').siblings().removeClass('active')
    var subHTML = ""
    $.each(hotData[that.index()].brands, function (index, item) {
      subHTML += `<li><span>${item.name}</span><span> ${item.num} <s class=
      ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
    })
    $('.sub').html(subHTML)
  }
  // 第一个默认激活
  var lis = $('.province .sup li')
  lis.eq(0).mouseenter()
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= 5) index = 0;
    // lis.eq(index).mouseenter();
    render(lis.eq(index));
  }, 2000);

  $(".province .sup").hover(
    // 鼠标经过事件
    function () {
      clearInterval(timer);
    },
    // 鼠标离开事件
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter();
        render(lis.eq(index));
      }, 2000);
    }
  );

})